<template>
  <view class="page-body flex-col">
    <div>
      <u-tabs
        :list="list"
        :current="tabIndex"
        :bar-style="{
          bottom: '10rpx',
        }"
        height="84"
        active-color="#F0250E"
        :active-item-style="{
          color: '#333',
        }"
        @change="tabsChange"
      ></u-tabs>
    </div>
    <scroll-view @scrolltolower="scrolltolower" scroll-y class="flex-h-1">
      <div v-if="orderList.length" class="list">
        <div class="item" v-for="(item, i) in orderList" :key="i">
          <div
            @click="
              $utils.toUrl(
                `/pt/detail/index?pt_number=${item.pt_number}&pt_order_id=${item.id}`
              )
            "
            class="goods flex"
          >
            <image :src="item.goods_list.pic" mode="aspectFill" />
            <div class="content flex-w-1 u-m-l-20">
              <view class="name-price flex-y-center u-m-b-6">
                <div class="u-m-r-20 u-line-1">
                  {{ item.goods_list.goods_name }}
                </div>
                <div class="font-w-600">
                  ￥
                  <text class="u-font-32">{{
                    item.goods_list.total_price | priceBeforeZero
                  }}</text>
                  {{ item.goods_list.total_price | priceAfterZero }}
                </div>
              </view>

              <view class="flex color-999 u-font-24">
                <div class="attr-box u-line-3 u-m-r-80 flex-w-1">
                  <text v-for="(attr, i1) in item.goods_list.attr" :key="i1">
                    <text
                      >{{ attr.attr_group_name }}：{{ attr.attr_name }}</text
                    >
                    <text v-if="i1 < item.goods_list.attr.length - 1">，</text>
                  </text>
                </div>

                <div class="num">共{{ item.goods_list.num }}件</div>
              </view>
            </div>
          </div>

          <div class="order-status u-m-t-24">
            <template v-if="item.status == 1">
              <div class="status">待付款</div>
              <div class="bts flex-w-1">
                <div class="btn" @click="toPay(item)">支付订单</div>
              </div>
            </template>
            <template v-else-if="item.status == 2">
              <div class="status">
                进行中，还差
                <template v-if="item.party_type == 0">
                  {{ item.surplus_num }}人
                </template>
                <template v-else> {{ item.surplus_num_goods }}件 </template>
                ，剩余
                <u-count-down
                  font-size="24"
                  separator-size="24"
                  color="#f0250e"
                  separator-color="#f0250e"
                  :timestamp="item.end_time"
                ></u-count-down>
                结束
              </div>
            </template>
            <template v-else-if="item.status == 3">
              <div class="status">已成功</div>
              <div class="bts flex-w-1">
                <div
                  class="btn"
                  @click="
                    $utils.toUrl(
                      '/order/order-detail/order-detail?id=' + item.order_id
                    )
                  "
                >
                  查看订单
                </div>
              </div>
            </template>
            <template v-else>
              <div class="status">已失败</div>
            </template>
          </div>
        </div>

        <div class="u-p-b-24">
          <u-loadmore :status="loadmoreStatus"></u-loadmore>
        </div>
      </div>

      <u-empty v-else mode="data"></u-empty>
    </scroll-view>
  </view>
</template>
<script>
const list = [
  {
    name: "全部",
  },
  {
    name: "待付款",
  },
  {
    name: "进行中",
  },
  {
    name: "已成功",
  },
  {
    name: "已失败",
  },
];
export default {
  data() {
    return {
      list,
      tabIndex: 0,
      orderList: [],
      page: {
        pageNo: 1,
        pageSize: 10,
      },
      loadmoreStatus: "loadmore",
    };
  },
  onLoad() {
    this.loadData();
  },
  onShow() {},
  methods: {
    async loadData(reset) {
      if (reset) {
        let { loadmoreStatus, orderList, page } = this.$options.data();
        this.page = page;
        this.orderList = orderList;
        this.loadmoreStatus = loadmoreStatus;
      }

      if (this.loadmoreStatus == "nomore") return;

      const res = await this.$allrequest.pt.getOrderList(
        {
          ...this.page,
          status: this.tabIndex,
        },
        true
      );
      this.page.pageNo++;
      this.orderList.push(...res.data.list);
      this.loadmoreStatus =
        this.orderList.length >= res.data.totalCount ? "nomore" : "loadmore";
    },
    tabsChange(e) {
      this.tabIndex = e;
      this.loadData(true);
    },
    scrolltolower() {
      this.loadData();
    },

    // 去支付
    toPay(item) {
      let data = {
        payData: {
          order_id: item.id,
          pay_type: item.pay_type_list[0]?.payment || "",
        },
        backUrl: "/pt/order/index",
        pay_type_list: item.pay_type_list,
        pay_price: item.pay_price,
        createDate: item.created_at,
      };
      this.$utils.toUrl(
        "/other/pay/pay?data=" + JSON.stringify(data) + "&is_pt=1"
      );
    },
  },
  computed: {},
  watch: {},
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },
  onReachBottom() {},
  onPullDownRefresh() {},
};
</script>
<style lang="scss" scoped>
.page-body {
  height: 100vh;
  background: #f2f2f2;
}

.list {
  padding-top: 24rpx;
  padding-bottom: env(safe-area-inset-bottom);
  .item {
    background: #fff;
    border-radius: 20rpx;
    padding: 24rpx;
    margin: 0 24rpx 24rpx;

    .goods {
      > image {
        width: 144rpx;
        height: 144rpx;
        border-radius: 10rpx;
        background: #f2f2f2;
      }
    }

    .order-status {
      display: flex;
      align-items: center;
      .status {
        color: #f0250e;
        font-size: 24rpx;
      }
      .bts {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .btn {
          width: 152rpx;
          line-height: 60rpx;
          text-align: center;
          background: #ffffff;
          border: 2rpx solid #f60313;
          border-radius: 120rpx;
          font-size: 26rpx;
          color: #f0250e;
        }
      }
    }
  }
}
</style>
